<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情-青鸟优品</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/detail.css">
    <!-- 引入jquery -->
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/common.js"></script>
    <script src="assets/layer/layer.js"></script>
    <style>
        .product-count {
            width: 100px !important;
            margin-top: 6px;
            margin-right: 20px;
        }

        .product-count input {
            background-color: #fff !important;
        }

        .product-count .input-group-addon {
            cursor: pointer;
            background-color: #fff;
        }
        .preview_img>.media-object{
            width: 352px;
            height: 352px;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">青鸟商城</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="#">热门推荐 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">国际品牌</a></li>
                    <li><a href="#">数码电器</a></li>
                    <li><a href="#">每日特价</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./login.html">登录</a></li>
                    <li><a href="./reg.html">注册</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container movie-detail">
        <div class="media">
            <div class="media-left preview_img">
                <img class="media-object"  alt="...">
                <div class="xzoom-thumbs">
                    <!-- <a href="./uploads/big/01.png"><img class="xzoom-gallery5" width="80" src="./uploads/04.png" ></a> -->
                </div>
            </div>
            <div class="media-body product-info">
                <!-- 商品信息 -->
                <div class="add-to-cart clearfix">
                    <div class="input-group product-count pull-left">
                        <div class="input-group-addon btn-reduce">-</div>
                        <input style="padding:0;text-align: center;" type="text" readonly class="form-control product-num" value="1">
                        <div class="input-group-addon btn-add">+</div>
                    </div>
                    
                    <button class="btn btn-danger btn-lg border-radius pull-left btn-add-cart">加入购物车</button>
                </div>
            </div>
        </div>

        <div class="row adv">
            <div class="col-xs-12 adv01">
                <!-- 广告位 -->
                <!-- <img src="./uploads/adv/adv-10.webp" alt=""> -->
            </div>
        </div>

        <div class="row introduce">
            <div class="col-xs-3">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">商品推荐</h3>
                    </div>
                    <div class="panel-body recom-list">
                        <!-- 推荐商品 -->
                    </div>
                </div>
            </div>
            <div class="col-xs-9">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">商品介绍</h3>
                    </div>
                    <div class="panel-body" id="introduce">
                        <!-- <img src="./uploads/detail/detail_img1.jpg" alt="">
                        <img src="./uploads/detail/detail_img2.jpg" alt="">
                        <img src="./uploads/detail/detail_img3.jpg" alt=""> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="container-fluid footer">
        <div class="row">
            <div class="col-lg-12">
                Copyright 2019 by www.braccp.com 北京畅想唯优信息技术有限公司 All rights reserved.
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                联系电话：029-88212666 地址：西安市雁塔区电子一路 石油大学北门工会楼二层
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                备案号：陕ICP备19013769号-1
            </div>
        </div>
    </div>

    <div class="fixed-nav-right">
        <!-- 返回首页 -->
        <div class="fixed-home">
            <a href="./index.html">
                <i class="glyphicon glyphicon-home"></i>
            </a>
        </div>
        <!-- 购物车 -->
        <div class="fixed-cart">
            <a href="./cart.html">
                <i class="glyphicon glyphicon-shopping-cart"></i>
            </a>
        </div>
        <!-- 返回顶部 -->
        <div class="back-top">
            <i class="glyphicon glyphicon-chevron-up"></i>
        </div>
    </div>


</body>
<script>
    // 商品分类id
    var cid;
    // 记录商品信息
    var product;
    $(function(){
        //获取商品id
        var id=location.search.split('=')[1];
        // id不是数字
        if(isNaN(id)||id===undefined){
            location.href="/index.html";
        }

        // 注册事件: 事件委托
        $(".xzoom-thumbs").on('mouseover','img',function(){
            var  img=$(this).prop('src');
            $(".preview_img>.media-object").prop('src',img);
            // 高亮显示被点击的小图
            // 先移除所有图片的高亮样式
            $(".xzoom-thumbs img").css({border:0});
            // 给当前被点击的元素添加高亮样式
            $(this).css({border:'1px solid red'});
        });

        $.ajax({
            url:'/apis/index.php?c=product&a=detail',
            data:{id},
            dataType:'json'
        }).then(function(res){
            // console.log(res);
            if(res.errcode==2){
                layer.msg(res.msg,function(){
                    location.href="/index.html";
                });
            }
            var html='';
            if(res.errcode==0&&res.data){
                const data=res.data;
                product=data;
                cid=data.cid;
                html+=`
                <h2 class="media-heading">${data.name}</h2>
                <div class="tips">
                    ${data.description}
                </div>
                <div class="price-wrap">
                    <p>
                        <span class="text-muted">价格</span>
                        <span class="price">&yen;${data.price}</span>
                        <span class="text-muted pull-right">累计销量${data.sales_volume}</span>
                    </p>
                    <p>
                        <span class="text-muted">促销</span>
                        <span>
                            加购价 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换 购热销商品 详情 》
                        </span>
                    </p>
                    <p>
                        <span class="text-muted">支持</span>以旧换新，闲置手机回收 4G套餐超值抢 礼品购
                    </p>
                </div>
                `;
                html+=`
                     <div class="color-group">
                    <span class="text-muted">选择颜色</span>
                `;
                data.colors.forEach(item=>{
                    html+=`<button class="btn-color item-color">${item}</button>`
                });
                html+=`</div>`;
                html+=`<div class="mode-group"><span class="text-muted">选择版本 </span>`;
                data.versions.forEach(item=>{
                    html+=`<button class="btn-color item-mode">${item}</button>`
                });
                html+=`</div>`;
                // 拼接商品的预览图
                $(".preview_img>.media-object").attr('src',data.cover);
                var img=``;
                data.imgs.forEach(item=>{
                    img+=` <a href="#"><img class="xzoom-gallery5" width="80" src="${item}"></a>`
                });
                // 商品预览图
                $('.xzoom-thumbs').html(img);
                // 商品信息 
                $(".add-to-cart").before(html);
                // 商品介绍
                $("#introduce").html(data.introduce);

                // 获取推荐商品列表
                return $.ajax({
                    url:'/apis/index.php?c=product&a=recom_list',
                    data:{cid},
                    dataType:'json'
                });
            }
            // 对象的解构赋值
        }).then(({errcode,data})=>{
            // console.log(rs);
            if(errcode===0&&data){
                var html='';
                data.forEach(item=>{
                    html+=`
                    <div class="">
                        <a href="/detail.html?id=${item.id}" title="${item.name}">
                            <img src="${item.cover}" alt="">
                            <h5>${item.name}</h5>
                            <p class="price"><b>¥ ${item.price}</b></p>
                        </a>
                    </div>
                    `;
                });
                // 渲染到页面上
                $(".recom-list").html(html);
            }
        });


        // 获取广告位信息
        $.get('/apis/index.php?c=adv&a=list',{page:'detail'},function({errcode,data}){
            // console.log(res);
            if(errcode===0&&data){
                var html=`
                    <a href="${data[0].url}" title="${data[0].title}" target="_blank">
                        <img src="${data[0].img}">
                    </a>
                `;
                $(".adv01").html(html);
            }
        },'json');
   
        // 通过加减按钮修改商品数量
        $(".btn-reduce").on('click',function(){
            var num=parseInt($(".product-num").val())-1;
            if(num>=1){
                $(".product-num").val(num);
            }
        });
        $(".btn-add").on('click',function(){
            var num=parseInt($(".product-num").val())+1;
            if(num<=10){
                $(".product-num").val(num);
            }else{
                layer.msg('库存不足');
            }
        });

        // 选择版本和颜色
        $(".product-info").on('click','.item-color',function(){
            // console.log('okkk');
            // 移除之前高亮显示的标签的高亮样式
            $(".product-info  .item-color").removeClass('plain-active');
            // 给当前被点击元素添加高亮样式
            $(this).addClass('plain-active');
        });
        // 选择版本
        $(".product-info").on('click','.item-mode',function(){
            // console.log('okkk');
            // 移除之前高亮显示的标签的高亮样式
            $(".product-info  .item-mode").removeClass('plain-active');
            // 给当前被点击元素添加高亮样式
            $(this).addClass('plain-active');
        });

        // 加入购物车
        $(".btn-add-cart").on('click',function(){
            // 是否选择了颜色
            if($(".color-group .plain-active").length===0){
                return layer.msg('请选择颜色');
            }
            var color=$(".color-group .plain-active").html();
            // 是否选择了版本
            if($(".mode-group .plain-active").length===0){
                return layer.msg('请选择版本');
            }
            var mode=$(".mode-group .plain-active").html();

            var cart=JSON.parse(localStorage.getItem('cart'))||[];
            // 从商品详情中解构需要的数据
            var {id,name,price,cover}=product;
            // 获取商品数量
            var num=parseInt($(".product-num").val());
            // 查找之前购物车中有没有添加当前的商品: 
            var index=cart.findIndex(item=>item.id===id);
            if(index>=0){
                cart[index].num+=num;
            }else{
                var obj={
                    id,
                    name,
                    cover,
                    price,
                    num,
                    color,
                    mode
                }
                cart.push(obj);
            }
            localStorage.setItem('cart',JSON.stringify(cart));
            // 成功提示信息
            layer.msg('添加购物车成功');
        });
    });
</script>
</html>